@(pageHeader: String)
@main("Crawler"){
<link rel="stylesheet" media="screen" href='@routes.Assets.at("stylesheets/crawler.css")'/>
}{
<script type="text/javascript">
    var statusInfo = function (param) {
        if (param.className == "ProductParsingError") {
            //$("#error").text(param.errorMessage + ", " + param.productInfo.url);
        } else if (param.className == "CategoryChanged"){
            $("#category-progress .bar").css("width", (0).toString()+"%");
        }
        else if (param.className == "SiteInfoChanged") {
            changeProgress(param.siteInfo);
            $(".breadcrumb").empty();
            changePath(param.siteInfo.currentSitePath);
        }
    }
    function changePath(sitePath){
        if (sitePath.childPathElement != null){
            addBreadCrumbItem(sitePath);
            changePath(sitePath.childPathElement);
        } else {
            addBreadCrumbLastItem(sitePath);
        }
    }
    function addBreadCrumbItem(sitePath){
        var $a = $("<a />").attr("href", sitePath.url).text(sitePath.title);
        var $divider = $('<span class="divider">/</span>');
        var $li = $("<li/>").append($a).append($divider);
        $(".breadcrumb").append($li);
        if (sitePath.containsProducts){
            changeCategoryProgress(sitePath);
            $("#pageNumber").text(sitePath.pageNumber);
        }
    }
    function changeCategoryProgress(param){
        $("#category-progress .bar").css("width", param.progress.toString()+"%");
    }
    function addBreadCrumbLastItem(sitePath){
        var $li = $('<li class="active" />').text(sitePath.title);
        $(".breadcrumb").append($li);
    }
    function changeProgress(param) {
        $("#overall-progress .bar").css("width", param.progress.toString()+"%");
    }

</script>
}{

<form method="POST" action="@routes.Crawler.stop()" class="form-horizontal">
    <fieldset>
        <legend>Progress</legend>
        <div class="control-group">
            <ul class="breadcrumb">
                <li class="active">@pageHeader.toUpperCase()</li>
            </ul>
        </div>
        <div class="control-group">
            Page: <span class="badge badge-info" id="pageNumber">0</span>
        </div>
        <div class="control-group">
            <label for="category-progress" style="width: 100%">Category progress:</label>
            <div class="progress" id="category-progress">
                <div class="bar"></div>
            </div>
        </div>
        <div class="control-group">
            <label for="overall-progress" style="width: 100%">Overall progress:</label>
            <div class="progress" id="overall-progress">
                <div class="bar"></div>
            </div>
        </div>
        <div class="control-group">
            <input type="submit" value="Stop" class="btn"/>
        </div>
    </fieldset>
</form>
<iframe src="@routes.Crawler.getStatus()" style="display: none"></iframe>
}